<template>
  <div>
    <h3>DatePicker 日期选择器 的使用</h3>
    <el-date-picker v-model="createDate"></el-date-picker>

    <h3>DatePicker日期选择器之属性使用</h3>
    <el-date-picker v-model="createDate" :editable="false"></el-date-picker>
    <!--editable=false的意思是值这个日期选择框只能选择日期,而不能在框中修改选中的日期-->
    <br><br>
    <el-date-picker v-model="createDate" placeholder="请输入创建日期"></el-date-picker>
    <br><br>
    <el-date-picker v-model="createDate" placeholder="请输入创建日期" type="daterange" start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy/MM/dd"></el-date-picker> <!--type="daterange"的意思是创建范围日期-->
    <br><br>
    <h3>DatePicker日期选择器之Picker Options的使用</h3>
    <el-date-picker v-model="endDate" placeholder="请输入截止日期" type="date"
                    :picker-options="pickerOptions" @change="printVal"></el-date-picker>


  </div>
</template>
<script>
export default {
  data() {
    return {
      createDate: "",
      endDate: "",
      pickerOptions: {
        disabledDate(time) {
          // 表示只能选择今天或者今天之前的日期
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    }
  },
  methods:{
    // 打印日期组件中的日期
    printVal(date) {
      console.log(date);
    },
  }
}
</script>
<style scoped>

</style>
